<!--
 * @Author: Mcc
 * @Date: 2024-07-30 16:13:56
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-10-12 18:21:23
 * @FilePath: \ft-apply-admin\src\views\ApplicationList\applicationList.vue
 * @Description:
 *
 * Copyright (c) 2024 by Mcc, All Rights Reserved.
-->
<template>
  <div id="applicationList">
    <div class="search">
      <div class="titles">
        <span class="title">高校数据</span>
        <span>{{currentDate?.startTime}}—{{ currentDate?.endTime }}</span>
      </div>
      <div class="search-r">
        <a-select show-search style="width: 200px"  @change="searchKeyWords" v-model:value="keyWords" placeholder="请选择年份">
          <a-select-option :value="item.value" v-for="item in yearOption" :key="item.timeLabel" :code="item">{{ item.timeLabel
            }}</a-select-option>
        </a-select>
      </div>
    </div>
    <template v-if="parameLoading">
      <div class="main-content">
        <div class="bottom_table">
          <BasicTable ref="monRef" rowKey="id" @register="monRegisterTable" size="small">
          </BasicTable>
        </div>
      </div>
      <div class="main-content">
        <div class="bottom_table">
          <BasicTable class="week-table" ref="weekRef" rowKey="id" @register="weekRegisterTable" size="small">
          </BasicTable>
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import {useTable} from "@/components/Table/index.ts";
import {comStores} from "@/store/common/comStore.ts";
const store = comStores()
const { userInFor } = store
import { useI18n } from '@/hooks/web/useI18n'
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const { t } = useI18n()
import {h, ref, computed, onMounted} from 'vue';
import { message } from 'ant-design-vue';

// 导入API
import {
  recruitProcessMonthReport,
  recruitProcessWeekReport, yearList
} from '@/api/applay/HRData/index'

// 表头 以及下拉框配置化
import {
  monColumns,
  weekColumns
} from '../HRData/components/moreData';
console.log('route.name', route.name)

const yearOption = ref<any>([])
const currentDate = ref<any>({})
const keyWords = ref(undefined)
const parameLoading = ref(false)
const getYearList = async () => {
  const data = await yearList()
  if(data){
    yearOption.value = data.timeRangeList
    currentDate.value = data.currentYear
    keyWords.value = data.currentYear.timeLabel
    parameLoading.value = true
    // reload()
  } else{
    message.error(data.msg)
  }
}
getYearList()

const getTabulationMonPage = () => {
  return recruitProcessMonthReport({year:keyWords.value})
}
const getTabulationWeekPage = () => {
  // return recruitProcessWeekReport({year:keyWords.value})
  return new Promise(async (resolve, reject) => {
    const data = await recruitProcessWeekReport({year:keyWords.value})
    console.log('data', data)
    if (data) {
      const obj = {
        arrivalAcceptedNum:0,
        arrivalScheduledNum:0,
        assessmentAcceptedNum:0,
        confirmedDeclinedNum:0,
        date: "合计",
        interviewAcceptedNum:0,
        onBoardingNum:0,
        onDutyNum:2,
        probationFailedNum:0,
        resumeSubmitNum:0,
        trainingArrivalAcceptedNum:0,
        trainingScheduledAcceptedNum:0,
        waitSignedNum:0,
        workingNum:2
      }
      for (let i = 0; i < data.length; i++) {
        obj.arrivalAcceptedNum += data[i].arrivalAcceptedNum
        obj.arrivalScheduledNum += data[i].arrivalScheduledNum
        obj.assessmentAcceptedNum += data[i].assessmentAcceptedNum
        obj.confirmedDeclinedNum += data[i].confirmedDeclinedNum
        obj.interviewAcceptedNum += data[i].interviewAcceptedNum
        obj.onBoardingNum += data[i].onBoardingNum
        obj.onDutyNum += data[i].onDutyNum
        obj.probationFailedNum += data[i].probationFailedNum
        obj.resumeSubmitNum += data[i].resumeSubmitNum
        obj.trainingArrivalAcceptedNum += data[i].trainingArrivalAcceptedNum
        obj.trainingScheduledAcceptedNum += data[i].trainingScheduledAcceptedNum
        obj.waitSignedNum += data[i].waitSignedNum
        obj.workingNum += data[i].workingNum
      }
      data.push(obj)
      resolve(data)
    }
  })
}
const tableColumns = ref<any>({})
const [monRegisterTable] = useTable({
  title: '月报表',
  api: getTabulationMonPage,
  columns:monColumns,
  bordered: true,
  showIndexColumn: false,
  canResize: false,
  pagination: false
});
const [weekRegisterTable] = useTable({
  title: '周报表',
  api: getTabulationWeekPage,
  columns:weekColumns,
  bordered: true,
  showIndexColumn: false,
  canResize: false,
  pagination: false
});


// 输入框搜索
const weekRef = ref<any>()
const monRef = ref<any>()
const searchKeyWords = (e,option) => {
  console.log('e-----',e,)
  currentDate.value = option.code
  getTabulationMonPage()
  getTabulationWeekPage()
}

</script>
<style lang="less" scoped>
.week-table {
  :deep(.ant-table-tbody) {
    tr:last-child {
      td {
        color: #E85B5B !important;
      }
    }
  }
}
:deep(::-webkit-scrollbar) {
  width: 8px; /* 滚动条宽度 */
  height: 8px!important; /* 滚动条高度 */
}

:deep(::-webkit-scrollbar-thumb:hover) {
  background-color: #dddddd!important; /* 鼠标悬停时滚动条拇指颜色 */
}


#applicationList {
  .search{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    .titles {
      color: #333333;

      .title{
        font-size: 20px;
        font-weight: bold;
        margin-right: 12px;
      }
    }
    .search-r{
      display: flex;
      .search-input {
        width: 368px;
        height: 32px;
        border-radius: 3px;
        border: 1px solid rgba(179, 192, 200, 0.3);
        color: #B3C0C8;

        ::placeholder {
          color: #B3C0C8;
          font-weight: 400;

        }
        .search-i-i{
          width: 20px;
          height: 20px;
        }
      }
    }
  }
  .main-content{
    padding: 16px;
    background-color: #FFFFFF;
    border-radius: 10px;
    margin-bottom: 25px;
  }
}
:deep(.boxGroup) {
  display: flex;
  flex-direction: column;
}
.bottom_table {
  position: relative;
  background: #ffffff;
}
/deep/.ft-basic-title{
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  padding-left: 0;
  &::before{
    content: '';
    display: inline-block;
    width: 18px;
    height: 0;
    vertical-align: middle;
    border-bottom: 4px solid #209EE4;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    overflow: hidden;
    transform: rotate(90deg);
    margin-top: -1px;
    margin-left: -7px;
  }
}
</style>
